<template>
    <div class="bg-blue-500 flex justify-center items-center" style="height:70px;">
        <div class="container flex justify-between text-white text-sm">
            <div class="text-3xl flex items-center" >
                <el-image :src="logo" style="height: 100%;"/>
            </div>
            <el-space>
                <el-input class="w-60" size="small" placeholder="搜索" :suffix-icon="Search" />
                <span class="pointer m-5" @click="onPage('/user_apply')">上传</span>
                <el-badge :value="msgcount" class="m-5">
                    <span class="pointer">通知</span>
                </el-badge>
                <el-badge :value="cartcount" class="m-5">
                    <span class="pointer" @click="onPage('/shoppingcart')">购物车</span>
                </el-badge>
                <div class="bg-white text-blue-500 pl-5 pr-5 pt-1 pb-1 rounded-lg pointer" @click="onLogin" v-if="!userInfo.id">登陆/注册</div>
                <el-dropdown v-else>
                    <!-- <span>{{ userInfo.nickname }}</span> -->
                    <el-avatar class="bg-white" :size="32" :src="baseUrl + userInfo.avatar" />
                    <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="logOut"
                        >退出登录</el-dropdown-item
                        >
                        <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                        <el-dropdown-item>Action 3</el-dropdown-item> -->
                    </el-dropdown-menu>
                    </template>
              </el-dropdown>
            </el-space>
        </div>
    </div>
</template>
<script setup>
import logo from "@/assets/imgs/logo.png";
import { Search } from "@element-plus/icons-vue";
import { ref, computed, onMounted, watch } from "vue";
import { GlobalStore, PersistentStore } from "@/stores";
import { useRoute, useRouter } from "vue-router";
import { cartCount,msgCount} from "@/http/api";
const baseUrl = import.meta.env.VITE_API_URL;
const route = useRoute();
const router = useRouter();
const globalStore = GlobalStore();
const persistentStore = PersistentStore();
const userInfo = computed(() => persistentStore.userInfo);
const cartcount = ref();
const msgcount = ref();
const page = ref(0);
onMounted(() => {
    //查询购物车的总数
    getCartCount();
    getMsgCount();
});

//查询信息的总数
const getMsgCount = async () => {
    const { data } = await msgCount({
        page: page.value,
        limit: 500,
    }); 
    console.log(data);
    msgcount.value = data.message;
};

//查询购物车的总数
const getCartCount = async () => {
    const { data } = await cartCount({
        page: page.value,
        limit: 500,
    }); 
    console.log(data);
    cartcount.value = data.good_cart;
};

const onPage = (e) => {       
    router.push(e);
};
const onLogin = (e) => {   
    globalStore.openShowLogin();
};
const logOut = () => {
  persistentStore.userInfo = [];
  persistentStore.setToken("");
};
</script>

<style scoped>
.container {
    width: 1440px;
}
.pointer{
    cursor:pointer;
}
</style>